<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
        .cuowu
        {
        	font: 15px "微软雅黑";
        	color:#FF0000;
        	display: none;
        }
    </style>
	</head>
	<body>
    账号：<input type="text" /><span class="cuowu">  输入错误</span> <br><br>
    密码：<input type="password"/><span class="cuowu">  输入错误</span>
	</body>
	<script>
		//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
      var user=document.getElementsByTagName("input")[0]
      var pass=document.getElementsByTagName("input")[1]
      var cuowu=document.getElementsByClassName("cuowu")[0]
      var cuowu1=document.getElementsByClassName("cuowu")[1]
      user.onblur=function()
      {
      	if(user.value.length>=6&&user.value.length<=12)
      	{
      		user.className="right"
      		cuowu.style.display="none"
      	}
      	else{
      		user.className="wrong"
      		cuowu.style.display="inline"
      		
      	}
      }
       pass.onblur=function()
      {
      	if(pass.value.length>=6&&pass.value.length<=12)
      	{
      		pass.className="right"
      		cuowu1.style.display="none"
      	}
      	else{
      		pass.className="wrong"
      		cuowu1.style.display="inline"
      	}
      }
	</script>
	
</html>
